<template>
  <div class="order">
    <h2>下单页</h2>
    <div v-if="cart.length > 0">
      <ul>
        <li v-for="item in cart" :key="item.id">
          <span>{{ item.name }}</span>
          <span>￥{{ item.price }}</span>
          <span>数量：{{ item.quantity }}</span>
        </li>
      </ul>
      <p>总价：￥{{ totalPrice }}</p>
      <button @click="submitOrder">提交订单</button>
    </div>
    <div v-else>
      <p>购物车为空，无法下单</p>
    </div>
  </div>
</template>

<script setup>
// 下单页，展示购物车商品并提交订单
import { computed } from 'vue'
import { useCartStore } from '../stores/cart'

const cartStore = useCartStore()
const cart = computed(() => cartStore.cart)
const totalPrice = computed(() => cartStore.totalPrice)

// 提交订单方法（这里只做简单演示）
function submitOrder() {
  alert('订单已提交！')
  cartStore.clearCart() // 清空购物车
}
</script>

<style scoped>
.order {
  padding: 20px;
}
</style> 